<template>
    <div class="containe" style="background-color: #f8f8f8;">
        <div class="cp-container" v-loading="loading">
            <div class="article"><nuxt-link to="/community/article" style="color:black;">文章 > </nuxt-link>  <span style="color:#999999;">个人详情</span> </div>
            <el-row>
                <el-col :span="6" class="img-box">
                    <shareTooltip class="share"></shareTooltip>
                    <div style="margin-top:50px;">
                        <div class="img-size">
                            <!-- <img src="" alt=""> -->
                            <img class="one" v-if="userobj.communityExpertLogo" :src="file + userobj.communityExpertLogo" alt="">
                        </div>
                        <div class="name">{{userobj.communityexpertName}}</div>
                        <div class="address">{{areajson(userobj.areaJson)}}</div>
                        <!-- <div class="line"></div> -->
                        <!-- <div class="contact flex">
                            <div class="follow flex flex-center">
                                <collection :collection-source-id="userobj.createUserId" collection-type="COMMUNITY_EXPERT">
                                    <p slot-scope="isColl" class="flex flex-center">
                                        <i :class="`icon ${isColl.data ? 'icon-follow' : 'icon-user-tip'}`"></i>
                                        {{isColl.data ? '取消关注' : '关注TA'}}
                                    </p>
                                </collection>
                            </div>
                            <p class="flex flex-center" @click="open53Server">
                                <i class="icon icon-weixin"></i>
                                联系TA
                            </p>
                        </div> -->
                    </div>
                </el-col>
                <el-col :span="17">
                    <div class="content-box">
                        <div class="article-size">文章</div>
                        <div class="imgs-box" v-for="(item,i) in topicList" :key="i">
                            <el-row>
                                <el-col :span="4" class="article-box">
                                    <img class="article-img" v-if="item.blogNewImg" :src="`${file}${item.blogNewImg.fileShowUrl}?x-oss-process=image/resize,w_${140}`" alt="">
                                </el-col>
                                <el-col :span="16">
                                    <div class="bim"><span>{{item.title}}</span><span class="days">{{dayFn(item.modifyDate)}}</span></div>
                                    <div class="now" v-html="htmlStr(item.info,80)"></div>
                                    <div class="numb"><span class="browse">{{item.browseNum}}次浏览</span><span>{{item.commentNum}}次评论</span></div>
                                </el-col>
                            </el-row>
                        </div>
                        <div v-if="isshows" class="lookmore" style="text-align:center;">暂无更多</div>
                        <div>
                            <div v-if="!isshows" class="lookmore" @click="pageChange"> 查看更多 <i class="el-icon-arrow-down"></i></div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script lang="ts">
import {Component, Vue} from 'nuxt-property-decorator'
import {findCommunityExpertByUserId} from '~/api/community'
import collection from '~/components/common/collection.vue'
import shareTooltip from '~/components/common/shareTooltip.vue'
import {open53Server} from '~/method'
@Component({
    layout: 'community',
    components: {
        collection,
        shareTooltip
    }
})
export default class CommunityExpertDetail extends Vue {
    topicList:any = []
    page:number = 0
    file:any = this.$store.state.basefile
    isshows:boolean = false
    loading:boolean = false
    userobj:object = {}
    pageNumber:any = 1
    pageSize:any = 3
    createUserId:any = 0
    mounted () {
        this.getAllTopicList()
        // console.log(this.$route.params.id)
        this.createUserId = this.$route.params.id
        this.findCommunityExpertByUserId({pageNumber: this.pageNumber, pageSize: this.pageSize, createUserId: this.createUserId})
    }
    handleCurrentChange (val:any) {
        console.log(val)
        // this.jsonList.pageNumber = val
        // this.getxqList()
    }
    areajson (val:any) {
        // console.log(val)
        if (val) {
            const strs = val.split(',')
            let st = ''
            for (let i = 0; i < strs.length; i++) {
                st = strs[0]
            }
            // console.log(st)
            return st
        }
    }
    dayFn (val:string) {
        return val.substring(0, 10)
    }
    async getAllTopicList () {
        // const {data}:any = await getAllTopicList()
        // if (data.code >= 0) {
        //     // data.data.city[0] = JSON.parse(data.data.city[0])
        //     const obj = data.data.slice(this.page * 3, 3)
        //     for (let i = 0; i > obj.length; i++) {
        //         this.topicList.push(obj[i])
        //     }
        //     console.log('33', this.topicList)
        // }
        // console.log(this.topicList)
        // if (this.topicList.length === 0) {
        //     this.isshows = true
        // }
    }
    async findCommunityExpertByUserId (val:any) {
        // console.log(val)
        this.loading = true
        const {data}:any = await findCommunityExpertByUserId(val)
        if (data.code >= 0) {
            // console.log(data.data.content)
            // this.topicList = data.data.content
            this.userobj = data.data.content[0]
            // data.data.city[0] = JSON.parse(data.data.city[0])
            // this.userobj = data.data[0]
            // // console.log(this.page)
            // const arrs = []
            // // console.log(obj)
            for (let i = 0; i < data.data.content.length; i++) {
                this.topicList.push(data.data.content[i])
            }
            // this.topicList = arrs
            // console.log(this.topicList)
            this.loading = false
            if (this.topicList.length === data.data.totalElements) {
                this.isshows = true
            }
        }
    }
    htmlStr (str: any, num: any) {
        const val = str.replace(/<\/?.+?>/g, '').replace(/(^\s+)|(\s+$)/g, '').replace(/&nbsp;/ig, '')
        let htmlVal = val || ''
        if (
            val &&
            num &&
            !isNaN(Number(num)) &&
            val.length > num
        ) {
            num = Number(num)
            htmlVal = val.substring(0, num) + '...'
        }
        return htmlVal
    }
    pageChange () {
        this.pageNumber++
        // console.log(this.pageNumber)
        this.findCommunityExpertByUserId({pageNumber: this.pageNumber, pageSize: this.pageSize, createUserId: this.createUserId})
    }
    open53Server () {
        open53Server()
    }
}
</script>
<style lang="scss" scoped>
.share{
    float: right;
    margin-top: 20px;
    height: 20px;
    line-height: 20px;
    display: flex;
    justify-content: flex-end;
    margin-right: 10px;
}
.img-box{
    width: 320px;
    height: 350px;
    background-color: #fff;
    margin-right: 20px;
    .img-size{
        width: 140px;
        height: 140px;
        // background-color: #333;
        border-radius: 50%;
        margin-left: 28%;
        margin-top: 2%;
        }
    .one{
        border-radius: 50%;
        width: 100%;
        height: 100%;
    }
    .name{
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        text-align: center;
    }
    .address{
        height: 40px;
        line-height: 40px;
        font-size: 12px;
        text-align: center;
    }
    .line{
        width: 100%;
        height: 1px;
        background-color: #f3f5f7;
    }
    .share:hover{
        color: #11a9e8;
    }
}
.content-box{
    padding: 10px;
    width: 100%;
    // height: 600px;
    margin-bottom: 20px;
    background-color: #fff;
    .article-box{
        width: 140px;
        height: 110px;
        margin-right: 20px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .article-size{
        margin: 10px 0;
        max-width: 40px;
        color: #333;
        font-size: 20px;
        z-index: 2;
        position: relative;
        &:after{
            content: '';
            position: absolute;
            left: -2px;
            right: -2px;
            bottom: 0px;
            background: #70cbf1;
            height: 6px;
            border-radius: 20px;
            z-index: -1;
        }
    }
    .imgs-box{
        width: 100%;
        height: 155px;
        background-color: #f8f8f8;
        padding: 10px;
        margin-bottom: 20px;
        position: relative;
        .bim{
            font-size: 16px;
            margin-bottom: 20px;
            color: black;
        }
        .days{
            // float: right;
            position: absolute;
            right: 20px;
            font-size: 14px;
            color: #cccccc;
        }
        .now{
            height: 51px;
            font-size: 14px;
            line-height: 26px;
            color: #939393;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            overflow: hidden;
            line-break: normal;
            -webkit-box-orient: vertical;
        }
        .numb{
            font-size: 12px;
            color: #b4b4b4;
            margin-top: 10px;
            .browse{
                margin-right: 30px;
            }
        }
    }
    .lookmore{
        text-align: center;
        color: #47b5eb;
        cursor: pointer;
    }
}
.article{
    height: 60px;
    line-height: 60px;
}
.contact {
    // margin-top: 25px;
    height: 64px;
    // border-top: 1px solid #f3f5f7;
    .icon{
        margin-right: 10px;
    }
    .follow{
        position: relative;
        flex: 1;
        p{
            font-size: 16px;
            color: #333;
        }
        &:after {
            content: '';
            position: absolute;
            right: 0;
            top: 50%;
            margin-top: -20px;
            width: 1px;
            height: 40px;
            border-right: 1px solid #f3f5f7;
        }
    }
    p {
        position: relative;
        flex: 1;
        cursor: pointer;
    }
}
</style>
<style lang="scss">
.now{
    div{
        background-color: #f8f8f8!important;
        // display: -webkit-box!important;
        // -webkit-line-clamp: 2!important;
        // overflow: hidden!important;
        // line-break: normal!important;
        // -webkit-box-orient: vertical!important;
    }
}
</style>
